<template>
  <a-layout>
      <a-layout-sider :style="siderStyle">
        <draggable :list="dragList" ghost-class="ghost" :force-fallback="true" :group="{ name: 'list', pull: 'clone' }"
      :sort="false" itemKey="id" >
      <template #item="{ element }">
        <div class="item move">
          <label class="move">{{ element.name }}</label>
        </div>
      </template>
    </draggable>
      </a-layout-sider>
      <a-layout>
        <a-layout-header :style="headerStyle">Header</a-layout-header>
        <a-layout-content :style="contentStyle">
          <draggable :list="widgetList" ghost-class="ghost" itemKey="id" :force-fallback="true" group="list"
      :fallback-class="true" :fallback-on-body="true" class="drag-content">
      <template #item="{ element }">
        <div class="item move">
          <!-- <label class="move title">{{ element.name }}</label> -->
          <div> <a-input v-model:value="input" placeholder="Please input" v-if="element.element === 'input'" /></div>
          <div><a-textarea v-model:value="textarea" :rows="2" type="textarea" placeholder="Please input"
              v-if="element.element === 'textarea'" /> </div>
        </div>
      </template>
    </draggable>
        </a-layout-content>
        <a-layout-footer :style="footerStyle">Footer</a-layout-footer>
      </a-layout>
    </a-layout>
</template>

<script lang="ts" setup>
  import draggable from 'vuedraggable';
  import { defineComponent, ref, unref,reactive,CSSProperties } from 'vue';
  interface type {
  name: string,
  id: number,
  element:String
}
const input="11";
const textarea='2222';
  const dragList: type[] = reactive<type[]>([
  { name: "单行文本", id: 1, element:"input" },
  { name: "多行文本", id: 2 , element:"textarea"},
  { name: "计数器", id: 3, element:"input" },
  { name: "单选框组", id: 4 , element:"input"},
])
 
const widgetList = reactive<type[]>([
  // { name: "多行文本", id: 2, element:"input" },
])
const headerStyle: CSSProperties = {
  textAlign: 'center',
  color: '#fff',
  height: 64,
  paddingInline: 50,
  lineHeight: '64px',
  backgroundColor: '#7dbcea',
};

const contentStyle: CSSProperties = {
  textAlign: 'center',
  minHeight: 120,
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#108ee9',
};

const siderStyle: CSSProperties = {
  textAlign: 'center',
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#3ba0e9',
};

const footerStyle: CSSProperties = {
  textAlign: 'center',
  color: '#fff',
  backgroundColor: '#7dbcea',
};
</script>

<style scoped lang="less">
  .drag-content_pa{
    height:500px; 
    width:1000px; 
    padding: 0 0 0 200px;
   
  }
  .drag-content {
       border: 1px dashed #000; /* 设置边框宽度、样式和颜色 */
        height:100%; //建议是外层嵌套一层div，div固定高，此处再设为100%
    }
  .left_dragable{
      padding: 0 12px 0 25px
    }

</style>
